<template>
    <view>
      <scroll-view
        class="content" 
        scroll-y
        :refresher-triggered="!isLoad&&type=='refresh'"
        :refresher-enabled="true"
        @refresherrefresh="loadData('refresh')"
        @scrolltolower="loadData"
      >
        <view class="blance flexT">
          <view>
            <view class="tit">余额(元)</view>
            <view class="price">{{balance||0}}</view>
            <view class="usePrice">（可用余额{{usableBalance||0}}）</view>
          </view>
          <view class="btn-link" @click="navTo('/userPages/carryCash/cashWay?balance='+usableBalance)">提现</view>
          <image class="bg" :src="require('./images/balance@2x.png')"></image>
        </view>
        <view class="h2">提现记录</view>
        <!-- 空白页 -->
        <view class="empty-box" v-if="isLoad === true && list.length === 0">
          <empty tips="暂无提现记录" :fixed="false"></empty>
        </view>
        <!-- 订单列表 -->
        <block v-else>
          <view class="item flexT" v-for="item in list" :key="item">
            <view>
              <view class="tit" @click="openPop(item.transferVoucher)">{{statList[item.balanceStatus-1]}}</view>
              <view class="time">{{item.createdDate.replace('T',' ')}}</view>
            </view>
            <view class="price">-¥{{item.money}}</view>
          </view>
          <uni-load-more v-if="!(params.pageNum==1&&loadingType=='nomore')" :status="loadingType"></uni-load-more>
        </block>
      </scroll-view>
      <uni-pop
        type="confirm"
        v-model="popData.isShow"
        title="转账凭证">
        <template slot="content">
          <image class="img" :src="popData.transferVoucher" @click="ViewImage()"></image>
        </template>
        <template slot="commit">
          <button
          class="commit-btn yes"
          @click="popData.isShow=false">关闭</button>
        </template>
      </uni-pop>
    </view>
</template>
 
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
    components: {
			uniLoadMore
		},
		data() {
			return {
        params:{
					pageNum: 1,
					pageSize: 10
				},
				isLoad: false, // 是否加载完毕
				loadingType: 'more', //加载更多状态
        list:[],
        balance:'', // 余额
        usableBalance:'',//可用余额
        statList:['提现中','提现成功','提现失败'],
        popData:{
					isShow: false,
					transferVoucher:''
				}, // 弹窗信息
			}
		},
    onShow() {
      this.loadData('refresh')
    },
    methods: {
      openPop(url){
        if(url){
          this.popData = {
            isShow: true,
					  transferVoucher:url
          }
        }
      },
      ViewImage() {
				uni.previewImage({
					current: 0,
					urls: [this.popData.transferVoucher]
				});
			},
      navTo(url){
				uni.navigateTo({
					url: url
				})
			},
      //加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add') {
				if(type=='refresh') { // 初始化刷新
					this.isLoad = false
					this.params.pageNum = 1
					this.loadingType = 'more'
					this.list = []
				}
				//没有更多直接返回
				if (this.loadingType==='loading' || this.loadingType==='nomore') return
				this.getList()
				if(type === 'refresh'){
					uni.stopPullDownRefresh();
				}
			},
      async getList() {
				const { code,result } = await this.$apis.getApi('/user/earning',this.params)
        this.isLoad = true
        this.balance = result.balance
        this.usableBalance = result.usableBalance||0
        const { list,navigateLastPage,pageNum } = result.earnList
        this.list = this.list.concat(list);
        //判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
        this.loadingType = pageNum >= navigateLastPage ? 'nomore' : 'more';
        this.params.pageNum++
			}
    },
	}
</script>
<style scoped lang="scss">
.content{
  .item{
    border-radius: 16upx;
    background: #fff;
    margin: 12upx $page-row-spacing;
    padding: 0 24upx;
    height: 118upx;
    .tit{
      font-size: 28upx;
      font-weight: 400;
    }
    .time{
      color: #999;
      font-size: 22upx;
      margin-top: 6upx;
    }
    .price{
      font-size: 30upx;
      margin-left: auto;
      color: #DD0717;
      font-weight: 500;
    }
  }
  .blance{
    position: relative;
    width: 710upx;
    height: 218upx;
    margin: 20upx auto;
    padding: 0 32upx 0 48upx;
    .bg{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .btn-link{
      background: #fff;
      color: #000;
      margin-right: 0;
      font-size: 28upx;
      height: 66upx;
      min-width: 182upx;
    }
    .tit{
      font-size: 24upx;
      color: #515151;
    }
    .price{
      font-size: 50upx;
      font-weight: 500;
      margin-top: 20upx;
    }
    .usePrice{
      margin-left: -20upx;
    }
  }
}
.h2{
  font-weight: 400;
  font-size: 26upx;
  padding: 6upx 20upx 8upx;
}
.empty-box{
  height: calc(100vh - 330upx);
  position: relative;
  margin: 0 20upx;
}
.img{
  width: 100%;
  margin-top: 20upx;
}
</style>
